<template>
    <div class="tabarMain" >
        <div class="barFrame">
            <!-- 欢迎 -->
            <div class="welcome">
                <div v-if="user == null" @click="dialogVisible = true">
                    您好 请先 <span class="frameFont">登录</span> 或
                    <span class="frameFont">注册</span>
                </div>
                <div v-else>
                    欢迎您，<span class="frameFont">{{ user.ulname }}</span>
                </div>
            </div>
            <!-- 欢迎 End -->

            <div class="">
                <!-- 状态订单表格 -->
                <el-popover popper-class="popoverPadding" placement="bottom" width="900" trigger="click">
                    <el-tabs tabPosition="left" type="border-card" height="250">
                        <el-tab-pane v-for="(item, index) in orderState" :key="index">
                            <div slot="label" @click="getOrderGoods(index + 1)">
                                {{ item }}
                            </div>

                            <el-table :data="tableData" style="width: 100%" height="220">
                                <el-table-column label="商品图片" width="100">
                                    <template slot-scope="scope">
                                        <img :src="scope.row.commodity.picture" style="height: 3rem" />
                                    </template>
                                </el-table-column>

                                <el-table-column label="商品名称" width="350">
                                    <template slot-scope="scope">
                                        <p>{{ scope.row.commodity.name }}</p>
                                    </template>
                                </el-table-column>

                                <el-table-column label="商品价格" width="100" align="center">
                                    <template slot-scope="scope">
                                        <p>{{ scope.row.commodity.price }}</p>
                                    </template>
                                </el-table-column>

                                <el-table-column label="商品数量" width="100" align="center">
                                    <template slot-scope="scope">
                                        <p>x{{ scope.row.commoditysum }}</p>
                                    </template>
                                </el-table-column>

                                <el-table-column label="操作" align="center">
                                    <template slot-scope="scope">
                                        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">{{
                                                index == 0
                                                    ? "去支付"
                                                    : index == 1
                                                        ? "提醒发货"
                                                        : index == 2
                                                            ? "立即收货"
                                                            : index == 3
                                                                ? "去评价"
                                                                : "再次购买"
                                        }}</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-tab-pane>
                    </el-tabs>
                    <span @click="getOrderGoods(1)" slot="reference" class="el-dropdown-link order">
                        我的订单
                        <i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                </el-popover>
                <!-- 状态订单表格 End-->

                <!-- 购物车按钮 -->
                <el-badge :max="10" :value="$store.state.shoppingCartNum" class="shoppingCartStyle">
                    <el-button :type="$store.state.shoppingCartNum > 0 ? 'warning' : ''" class="shoppingCartBtn"
                        @click="goShoppingCart()" size="small"><i class="el-icon-shopping-cart-2"></i>购物车</el-button>
                </el-badge>
                <!-- 购物车按钮 End-->

                <!-- 我的  -->
                <el-popover placement="bottom" width="200" trigger="hover">
                    <div v-if="user" class="user-container">
                        <img class="userImg" :src="user.uface" />
                        <div class="user-font-style">{{ user.ulname }}</div>

                        <div class="icon-container">
                            <div class="icon1"><i class="el-icon-view"></i>我的足迹</div>
                            <div class="icon1">
                                <i class="el-icon-shopping-bag-2"></i>我的收藏
                            </div>
                            <div class="icon1" @click="getBalance()">
                                <i class="el-icon-c-scale-to-original"></i>我的钱包
                            </div>
                            <div class="icon1">
                                <i class="el-icon-collection-tag"></i>我的优惠券
                            </div>
                        </div>

                        <div class="btn-container">
                            <el-button @click="logout" type="warning" size="mini">退出账号</el-button>
                            <el-button type="success" size="mini">修改信息</el-button>
                        </div>
                    </div>
                    <div v-else>
                        <el-empty :image-size="100" description="未登录">
                            <el-button @click="dialogVisible = true" type="primary">登录</el-button>
                        </el-empty>
                    </div>

                    <span style="margin-left: 10px" slot="reference" class="el-dropdown-link order">
                        {{ user == null ? "未登录" : "我的" }}
                        <i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                </el-popover>
                <!-- 我的  End-->
            </div>
        </div>

        <div class="tabarMain">
            <div class="tabarFrame">
                <!-- ESHOP--Logo -->
                <div class="">
                    <p @click="home()" class="ESHOP">ESHOP</p>
                </div>
                <!-- ESHOP--Logo End -->

                <!-- autoComplete 搜索框-->
                <div>
                    <el-autocomplete class="el-input" ref="autocomplete" placeholder="请输入商品关键字" v-model="queryInfo"
                        clearable @clear="clickClearable" :highlight-keyword="true"
                        :fetch-suggestions="querySearch" @select="handleSelect" :trigger-on-focus="false">

                        <el-button slot="append" icon="el-icon-search" @click="toDeatail"></el-button>

                        <template v-if="(item.id != 0)" slot-scope="{ item }">
                            <div class="name" v-html="htmlValue(item.value)"></div>
                            <span class="addr">{{ item.text }} | ￥{{ item.price }}起 | {{ item.blackname }}</span>
                        </template>

                        <template v-else slot-scope="{ item }">
                            <div class="name">{{ item.value }}</div>
                        </template>
                    </el-autocomplete>

                    <!-- autoComplete 搜索框 End-->

                </div>
            </div>
        </div>
        <!-- 登录Dialog -->
        <el-dialog title="登录" :visible.sync="dialogVisible" width="30%">
            <el-input placeholder="请输入账号" v-model="username" clearable></el-input>

            <el-input placeholder="请输入密码" show-password v-model="password" clearable></el-input>

            <el-link type="primary">点击注册</el-link>

            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="Tologin()">登录</el-button>
            </span>
        </el-dialog>
        <!-- 登录Dialog End -->

        <!-- 用户钱包弹窗 -->
        <el-drawer title="钱包" :visible.sync="dialogVisible1">
            <div class="banlance-container">
                <div>
                    <div>总资产/元</div>
                    <p>{{ balance.blance }}</p>
                </div>
                <div>
                    <div>累计充值/元</div>
                    <p>{{ balance.ljcz }}</p>
                </div>
                <div>
                    <div>累计消费/元</div>
                    <p>{{ balance.xfe }}</p>
                </div>
            </div>
            <div class="balance-add">
                <div>
                    <p>充10元送100元</p>
                    <el-button @click="addBalance(100)" size="mini" round>充值</el-button>
                </div>
                <div>
                    <p>充100元送1000元</p>

                    <el-button @click="addBalance(1000)" size="mini" round>充值</el-button>
                </div>
            </div>
        </el-drawer>

        <!-- 用户钱包弹窗 End-->
    </div>
</template>

<script>
import { Login, Balance, Recharge } from "@/utils/api/user.js";
import { getSbysanduid, GetShoppingCatbyUseid, getCommodityLike } from "@/utils/api/api.js";
var recoder;
export default {
    data() {
        return {
            username: "admin",
            password: "123456",
            //当前用户数据
            user: [],
            //登录框状态
            dialogVisible: false,
            //用户钱包抽屉状态
            dialogVisible1: false,
            //订单五个状态
            orderState: ["待支付", "待发货", "待收货", "待评价", "已完成"],
            //用户钱包数据
            balance: [],
            //购物车数量角标
            countGoodsNum: 0,
            //输入关键字
            queryInfo: '',
            //订单状态表格数据
            tableData: [],
        };
    },
    methods: {
        //登录
        Tologin() {
            const userInfo = {
                uname: this.username,
                upassword: this.password,
            };
            Login(userInfo)
                .then((resp) => {
                    if (resp.code == 200) {
                        this.$message({ message: `登录成功`, type: "success" });
                        //关闭弹窗
                        this.dialogVisible = false;
                        //修改登录状态State
                        this.$store.commit("changeLogin", resp),
                            //更新状态
                            this.updateLogin();
                        this.countGoods();
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        //根据订单状态获取商品
        getOrderGoods(index) {
            getSbysanduid(index, this.user.uid).then((resp) => {
                this.tableData = resp.msg;
            });
        },
        //获取用户钱包
        getBalance() {
            this.dialogVisible1 = true;
            Balance(this.user.uid).then((resp) => {
                console.log(resp);
                this.balance = resp.sku;
            });
        },
        //钱包充值
        async addBalance(num) {
            const userinfo = JSON.parse(localStorage.getItem("user"));
            const data = await Recharge(userinfo.uid, num);
            if (data.code == 200) {
                this.$notify.success("充值成功");
                this.getBalance();
            } else {
                this.$notify.error("充值失败");
            }
        },
        //跳转购物车
        goShoppingCart() {
            this.$router.push({
                path: "/shoppingCart",
            });
        },
        //登出
        logout() {
            localStorage.clear();
            this.$router.go(0);
        },
        updateLogin() {
            this.user = JSON.parse(localStorage.getItem("user"));
        },
        btnFont(index) {
            switch (index) {
                case 1:
                    return "立刻支付";
                    break;
                case 2:
                    return "催发货";
                    break;
                case 3:
                    return "联系客服";
                    break;
                case 4:
                    return "去评价";
                    break;
                case 5:
                    return "删除";
                    break;
                default:
            }
        },
        //商品计数器
        countGoods() {
            if (this.user) {
                GetShoppingCatbyUseid(this.user.uid).then((resp) => {
                    this.$store.commit('currentShoppingCartNum', resp.msg.length)
                    this.countGoodsNum = this.$store.state.shoppingCartNum

                });
            } else {
                return 99
            }
        },
        home() {
            this.$router.push({
                path: "/home",
            });
        },
        //接收关键字,并搜索
        querySearch(query, cb) {
            console.log(query)
            getCommodityLike(query).then(resp => {
                this.allInfos = resp.sku.map(item => {
                    return {
                        value: item.name,
                        id: item.commodityID,
                        text: item.blackname,
                        price: item.price,
                        blackname: item.blackname
                    };
                });
                console.log(this.allInfos);
                if (this.allInfos.length > 0) {
                    cb(this.allInfos);
                } else {
                    this.allInfos = [{ value: '未查询到商品', id: 0, text: '请重新输入' }]
                    cb(this.allInfos)
                }
            })
        },
        //清除搜索框
        clickClearable() {
            this.$refs.autocomplete.activated = true;
        },
        //查询列表点击事件
        handleSelect(item) {
            this.$router.push({
                path: '/details',
                query: {
                    goodsId: Number(item.id)
                }
            })

        },
        //跳转至搜索结果
        toDeatail() {
            // console.log(this.queryInfo);
            localStorage.setItem('SEARCH_KEY',this.queryInfo)

            this.$router.push({
                path: '/goodsListMore',
                query: {
                    query: this.queryInfo,
                    time:Date.now()
                }
            })
        },
        htmlValue(val) {
            let key = this.queryInfo;
            if (key.length > 0) {
                return val.replace(
                    new RegExp(key, "g"),
                    "<span style='color:orange;'>" + key + "</span>"
                );
            }
            return val;
        },


    },
    created() {
        this.updateLogin();
        this.countGoods()

    },
    updated () {
        // this.$forceUpdate()
    }
};
</script>

<style lang="scss">
.highlight {
    color: orange;
    font-weight: bold;
}

.popoverPadding {
    padding: 0 !important;
}

.el-tabs--card {
    height: 400px;
    /* overflow-y: auto; */
}

.banlance-container {
    margin: 20px;
    padding: 10px 10px;
    display: flex;
    justify-content: space-between;
    background-color: #f8f8f8;
    border-radius: 20px;

    // flex-direction: column;
    div {
        display: flex;
        flex-direction: column;
        text-align: center;

        div {
            font-size: 16px;
            font-weight: bold;
            color: rgb(68, 68, 68);
        }

        p {
            margin-top: 20px;
            font-size: 20px;
            color: rgb(255, 189, 65);
        }
    }
}

.balance-add {
    display: flex;
    flex-direction: column;
    margin: 20px;
    background-color: #f8f8f8;
    border-radius: 20px;
    padding: 10px 10px;
    color: #000000;

    div {
        margin: 5px 5px;
        display: flex;
        justify-content: space-between;
    }
}

.el-tab-pane {
    height: 220px;
    // overflow-y: auto;
}

.user-container {
    display: flex;
    flex-direction: column;
    align-items: center;

    .icon-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin: 10px 0;

        .icon1 {
            width: 40%;
            display: flex;
            flex-direction: column;
            text-align: center;
            padding: 6px;

            i {
                color: orange;
                font-size: 30px;
            }
        }
    }

    .user-font-style {
        font-size: 20px;
        font-family: YouYuan;
    }

    .userImg {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: 2px solid gray;
        // transform: translateX(-20px);
    }

    .btn-container {
        display: flex;
        width: 80%;
        margin: 0 auto;
    }
}

.tabarMain {
    width: 100%;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
    background-color: #535353;
    color: #fff;

    .barFrame {
        width: 1200px;
        display: flex;
        justify-content: space-between;
        padding: 10px;
        box-sizing: border-box;

        .welcome {
            margin: auto 0;
        }

        .frameFont {
            color: rgb(255, 174, 0);
            font-weight: bold;
        }

        .el-dropdown {
            font-size: 16px;
            color: #000000;
            margin: 0 10px;
        }

        .shoppingCartStyle {
            margin: 0;
            cursor: pointer;
            margin: 0 8px;

            .shoppingCartBtn {
                padding: 8px;
            }
        }
    }

    .tabarMain {
        width: 100%;
        display: flex;
        text-align: center;
        padding: 30px;
        align-items: center;
        justify-content: space-around;
        box-sizing: border-box;
        background-color: white;

        .tabarFrame {
            width: 1200px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .ESHOP {
                font-size: 30px;
                color: rgb(255, 132, 0);
                font-weight: bolder;
                cursor: pointer;
            }

            :deep(.el-input__inner) {
                border-color: rgb(255, 132, 0);
            }

            :deep(.el-input-group__append, .el-input-group__prepend) {
                background-color: rgb(255, 132, 0);
                color: white;
                border-color: rgb(255, 132, 0);
            }

            .el-input {
                width: 400px;
            }
        }
    }

    .el-input {
        margin: 10px 10px;
        width: 90%;
    }

    .order {
        cursor: pointer;
    }

    .el-badge__content {
        border: none;
    }
}

.addr {
    font-size: 10px;
    color: #949494;
}
:deep(.my-autocomplete) {
    line-height: normal;
    padding: 4px;
}
</style>
